<!--新建广告-->
<template>
  <div class="storePromotion">
    <el-row class="top bgcolor1 font_size3 font_color1">
      <el-col :span="24">
        <span>新建／编辑</span>
      </el-col>
    </el-row>
    <div class="content bgcolor1">
      <el-form ref="form" :model="form" label-width="100px" style="width: 500px;">
        <el-form-item label="广告名称:" class="adv-item" required>
          <el-input v-model="form.name" placeholder="请输入广告名称"  :maxlength=Number(10)></el-input>
        </el-form-item>
        <el-form-item label="投放位置:" class="adv-item" required>
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="0" name="type" disabled>首页bananer</el-checkbox>
            <el-checkbox label="2" name="type" disabled>商家列表bananer</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="显示时间:" class="adv-item" required>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" :picker-options="pickerOptions0" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line " :span="2" style="text-align:center;">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" :picker-options="pickerOptions0" v-model="form.date2" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="广告图片:" class="adv-item" required>
          <el-upload
            class="upload-demo"
            :action="form.advUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileList">
            <el-button class="pushBtn" >
              <span @click="adv_photo"><i class="el-icon-upload"></i>点击上传</span>
            </el-button>
            <div slot="tip" class="el-upload__tip push_label">最佳照片尺寸为：宽：750px，高：380px，大小不超过200kb</div>
          </el-upload>
        </el-form-item>
        <p style="margin: -20px 0 10px 18px;"><span style="color: red;display: inline-block;margin-right: 5px;">*</span>以下信息为非必填项，三选一
        </p>
        <el-form-item label="详情图片:"  style="margin-bottom: 10px;">
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="form.advUrl1"
            :on-preview="handlePreview1"
            :on-remove="handleRemove1"
            :on-success="handleSuccess1"
            :before-upload="beforeAvatarUpload1"
            :file-list="fileList1">
            <el-button class="pushBtn">
              <span @click="adv_photo1"> <i class="el-icon-upload"></i>点击上传</span>
            </el-button>
            <!--<div slot="tip" class="el-upload__tip push_label">最佳照片尺寸为：宽：750px，高：380px，大小不超过200kb</div>-->
          </el-upload>
        </el-form-item>
        <el-form-item label="跳转商家:"  style="margin-bottom: 20px;">
          <el-button class="comfirmBtn" @click="storeTZ" style="width: 100px;">+关联店铺</el-button>
          <span class="span1" style="padding-left: 8px;" v-if="num==2">{{storeN}}</span>
        </el-form-item>
        <el-form-item label="跳转商品详情:"  style="margin-bottom: 20px;">
          <el-button class="comfirmBtn" @click="goodsTZ" style="width: 100px;">+关联商品</el-button>
          <span class="span1" style="padding-left: 8px;" v-if="num==3">{{storeN}}  {{goodsN}}</span>
        </el-form-item>
        <!--v-if="goodsN&&num==3"-->
        <el-form-item label="商品详情图片:" class="adv-item" required v-if="goodsN&&num==3">
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="form.advUrl2"
            :on-preview="handlePreview2"
            :on-remove="handleRemove2"
            :on-success="handleSuccess2"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList2">
            <el-button class="pushBtn">
              <span @click="adv_photo2"> <i class="el-icon-upload"></i>点击上传</span>
            </el-button>
            <!--<div slot="tip" class="el-upload__tip push_label">最佳照片尺寸为：宽：750px，高：380px，大小不超过200kb</div>-->
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button class="cancleBtn" @click="goBack">取消</el-button>
          <el-button class="comfirmBtn bc_btn" @click="onSubmit" >保存</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="mask" v-if="errShow"></div>
    <el-dialog style="text-align: center;position: absolute;width: 100%;" :visible.sync="dialogVisibleGL" size="tiny" :modal="false"
               :close-on-click-modal="false" :id="storeTz&&num==3?'dsGL':''">

      <el-row>
        <el-col :span="storeTz&&num==3?12:24">
          <div class="heig75">
            <span class="span1" style="padding-left: 8px;">跳转商家：</span>
            <el-select v-model="storeTz" placeholder="全部" class="y_select inputC" filterable
                       :style="storeTz&&num==3?'width: 60%;':'width: 30%;'">
              <el-option
                v-for="item in storePromotion"
                :key="item.storeId"
                :label="item.storeName"
                :value="item.storeId">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12" v-if="storeTz!=''&&num==3">
          <div class="heig75">
            <span class="span1" style="padding-left: 8px;">跳转商品：</span>
            <el-select v-model="goodsTz" placeholder="全部" class="y_select inputC" filterable
                       style="width: 60%;">
              <el-option
                v-for="item in goodsPromotion"
                :key="item.goodsId"
                :label="item.name"
                :value="item.goodsId">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="cencelTz" class="cp_qx">取 消</el-button>
                  <el-button type="primary" @click="dialogVisibleGL = false" class="cp_qx">确 定</el-button>
                </span>
    </el-dialog>
    <el-dialog style="text-align: center;position: absolute;" :visible.sync="errShow" size="tiny" :modal="false" :close-on-click-modal="false">
      <span style="font-size: 14px;color: rgba(89,115,128,1)">{{errTips}}</span>
      <span slot="footer" class="dialog-footer">
                  <el-button @click="errShow=false" class="comfirmBtn">确 定</el-button>
                </span>
    </el-dialog>
    <div class="mask" v-if="dialogVisibleGL"></div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        },
        dialogVisibleGL:false,
        options: [],
        value:'',
        fileList:[],
        fileList1:[],
        fileList2:[],
        form: {
          name: '',
          type: [],
          date1: '',
          date2: '',
          advUrl:'',
          advUrl1:'',
          advUrl2:'',
        },
        photo_url:'',
        photo_url1:'',
        storeId:'',
        errTips:'',
        goodsDUrl:'',
        errShow:false,
        advImgUrl:"",
        advImgUrl1:"",
        advImgUrl2:"",
        goodsTz: '',
        storeTz: '',
        num: 0,
        storePromotion: [],
        goodsPromotion:[],
        storeN:"",
        goodsN:""
      }
    },
    methods: {
      handleRemove1(file, fileList) {
        console.log(file, fileList);
        this.advImgUrl1 = "";
        this.fileList1 = [];
        this.num=0

      },
      handlePreview2(file) {
        console.log(file);
      },
      beforeAvatarUpload(file) {
        console.log(file.type)
        var isJPG = file.type == 'image/jpeg';
        var isPNG = file.type == 'image/png';
        if (!isJPG && !isPNG) {
          this.errTips = '广告图非图片格式不能上传'
          this.errShow = true;
          return false;
        }
      },
      handleRemove2(file, fileList) {
        console.log(file, fileList);
        this.goodsDUrl = "";
        this.fileList2 = [];
      },
      handleSuccess2(response, file, fileList){
        this.goodsDUrl = response.result;
        this.$http.get(`${this.$store.state.path}goods/v2/${this.goodsTz}`)//查询商品
          .then(res => {
            console.log(res.body)
            if (res.body.result) {
              let json = {
                "goodsDetail": this.goodsDUrl,
                "storeId":this.storeTz
              }
              this.$http.put(`${this.$store.state.path}goods/v2/edit/${this.goodsTz}`,json)//修改商品详情
                .then(res => {
                  console.log(res.body)
                  if (res.body.result) {

                  }
                  if (!res.body.result) {

                  }
                }, res => {

                })
            }
            if (!res.body.result) {

            }
          }, res => {

          })
      },
      adv_photo2(){
        this.goodsDUrl = "";
        this.fileList2 = [];
        this.form.advUrl2 = `${this.photo_url}fileName=${this.form.name}&storeId=${this.storeId}`
      },
      goodsTZ(){
        this.num=3
        this.$store.state.loadingFlag = true
        this.dialogVisibleGL = true
        this.storePromotion = []
        this.advImgUrl1 = "";
        this.fileList1 = [];
        this.storeTz = "";
        this.$http.get(`${this.$store.state.path}stores/community/filter?communityId=${this.$store.state.storeId}&page=0&size=10000&merchantType=0&status=0`)//查询小区商户
          .then(res => {
            console.log(res.body)
            this.$store.state.loadingFlag = false
            if (res.body.result) {
              this.storePromotion = res.body.result.storeResponseDTOList;
              if (!this.storePromotion.length) {

              }
            }
            if (!res.body.result) {
              this.storePromotion = []
            }
          }, res => {

          })
      },
      storeTZ(){
        this.num=2
        this.$store.state.loadingFlag = true
        this.dialogVisibleGL = true
        this.storePromotion = []
        this.advImgUrl1 = "";
        this.fileList1 = [];
        this.goodsTz = "";
        this.$http.get(`${this.$store.state.path}stores/community/filter?communityId=${this.$store.state.storeId}&page=0&size=10000&merchantType=0&status=0`)//查询小区商户
          .then(res => {
            console.log(res.body)
            this.$store.state.loadingFlag = false
            if (res.body.result) {
              this.storePromotion = res.body.result.storeResponseDTOList;

            }
            if (!res.body.result) {
              this.storePromotion = []
            }
          }, res => {

          })
      },
      cencelTz(){
        this.dialogVisibleGL = false
        this.goodsTz = this.storeTz =  this.goodsN = this.storeN = ``
      },
      handleSuccess1(response, file, fileList){
        this.advImgUrl1 = response.result;
        this.num=1
      },
      beforeAvatarUpload1(file) {
        console.log(file.type)
        var isJPG = file.type == 'image/jpeg';
        var isPNG = file.type == 'image/png';
        if (!isJPG && !isPNG) {
          this.errTips = '广告图非图片格式不能上传'
          this.errShow = true;
          return false;
        }
      },

      adv_photo1(){
        this.advImgUrl1 = "";
        this.fileList1 = [];
        this.goodsTz = "";
        this.storeTz = "";
        this.form.advUrl1 = `${this.photo_url}fileName=${this.form.name}&storeId=${this.storeId}`
      },
      handlePreview(file) {
        console.log(file);
      },
      handlePreview1(file) {
        console.log(file);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        this.advImgUrl='';//图片移除后
        console.log('有没有移除')
      },
      handleSuccess(response,file,fileList){
        this.advImgUrl=response.result;
        console.log(response)
      },
      adv_photo(){
        this.fileList=[]
        this.advImgUrl = ``
        this.form.advUrl=`${this.photo_url}fileName=${this.form.name}&storeId=${this.storeId}`
      },
      goBack(){
        this.$router.back(-1);//返回
      },
      onSubmit() {
        let form=this.form;
        if(form.name==''){
          this.errTips='广告名称不能为空'
          this.errShow=true;
          return false;
        }
        if(form.type.length==0){
          this.errTips='请选择广告投放位置'
          this.errShow=true;
          return false;
        }
        if((form.date1=='')||(form.date1==undefined)){
          this.errTips='请选择开始时间'
          this.errShow=true;
          return false;
        }
        if((form.date2=='')||(form.date2==undefined)){
          this.errTips='请选择结束时间'
          this.errShow=true;
          return false;
        }
        if(form.date1>form.date2){
          this.errTips='开始时间不能大于结束时间'
          this.errShow=true;
          return false;
        }
        if(this.advImgUrl==""){
          this.errTips='请上传广告图片'
          this.errShow=true;
          return false;
        }
        if (this.num == 3&&!this.goodsDUrl) {
          this.errTips = '请上传商品详情图片'
          this.errShow = true;
          return false;
        }
        let startTime=this.form.date1;
        let endTime=this.form.date2;
        if(typeof(startTime)!='string'){
          let yy1=startTime.getFullYear();
          let mm1=startTime.getMonth()+1;
          let dd1=startTime.getDate();
          if(mm1<10){
            mm1="0"+String(mm1);
          }
          if(dd1<10){
            dd1="0"+String(dd1);
          }
          startTime=String(yy1)+'-'+String(mm1)+'-'+String(dd1);
        }
        if(typeof(endTime)!='string'){
          let yy2=endTime.getFullYear();
          let mm2=endTime.getMonth()+1;
          let dd2=endTime.getDate();
          if(mm2<10){
            mm2="0"+String(mm2);
          }
          if(dd2<10){
            dd2="0"+String(dd2);
          }
          endTime=String(yy2)+'-'+String(mm2)+'-'+String(dd2);
        }
        if(startTime>endTime){
          this.errTips='开始时间不能大于结束时间'
          this.errShow=true;
          return false;
        }
        console.log(this.goodsTz)
        if (this.num == 3&&!this.goodsTz) {
          this.errTips = '请关联一个商品'
          this.errShow = true;
          return false;
        }
        let adv_types=form.type.join(';')
        var advName=this.form.name;
        let path_ = ``
        let detail_ =``
        let type_ = ``
        if(this.num==0){
          type_=0
          detail_ = ``
        }
        if(this.num==1){
          type_=0
          detail_ = this.advImgUrl1
        }
        if(this.num==2){
          type_=2
          detail_ = this.storeTz
        }
        if(this.num==3){
          type_=1
          detail_ = this.goodsTz
        }
        if(this.goodsTz||this.storeTz||this.advImgUrl1) path_+=`&detailType=${type_}&detail=${detail_}`
        this.$http.put(`${this.$store.state.path}/advert/${this.storeId}/${this.form.advertId}?name=${advName}&startTime=${startTime}&endTime=${endTime}&advType=${adv_types}&imageUrl=${this.advImgUrl}${path_}`)
          .then(res => {
            this.$router.push({path:'/advertList/'});//去广告列表路由
            console.log(res,'修改')
          }, res => {
          })
      },

    },
    watch: {
      storeTz(value,oldVale){
        if (value) {
          this.$http.get(`${this.$store.state.path}goods/v2/page/${value}`)//查询s所有商品
            .then(res => {
              console.log(res.body)
              if (res.body.result) {
                this.goodsPromotion =res.body.result.goodsList
              }
              if (!res.body.result) {

              }
            }, res => {

            })
          this.$http.get(`${this.$store.state.path}stores/${value}`)//查询小区商户
            .then(res => {
              console.log(res.body)
              if (res.body.result) {
                this.storeN =res.body.result.storeName
              }
              if (!res.body.result) {

              }
            }, res => {

            })
        }
      },
      goodsTz(value,oldVale){
        if(value){
          this.$http.get(`${this.$store.state.path}goods/v2/${value}`)//查询单一商品
            .then(res => {
              console.log(res.body)
              if (res.body.result) {
                this.goodsN =res.body.result.name
              }
              if (!res.body.result) {

              }
            }, res => {

            })
        }
      }
    },
    created(){
      this.photo_url=this.$store.state.photo_path;
      this.storeId=this.$store.state.storeId;
      let editAdvItem=this.$store.state.editAdvItem;
      console.log(editAdvItem)
      this.form.advertId=editAdvItem.advertId;
      this.form.name=editAdvItem.advertName;
      this.form.date1=editAdvItem.advertStartTime;
      this.form.date2=editAdvItem.advertEndTime;
      this.advImgUrl=editAdvItem.advertImageUrl;
      if(editAdvItem.advType=='0'){
        this.form.type=['0']
      }
      if(editAdvItem.advType=='2'){
        this.form.type=['2']
      }
      if((editAdvItem.advType=='0;2')||(editAdvItem.advType=='2;0')){
        this.form.type=['0','2']
      }
      let obj={};
      if(editAdvItem.advertImageUrl){
        obj.url=editAdvItem.advertImageUrl;
        obj.name=editAdvItem.advertImageUrl.split('-')[1];
        this.fileList[0]=obj;
      }
      if(editAdvItem.advertDetailType==0&&editAdvItem.advertDetail){
        this.num=1
        let obj={};
        obj.url=editAdvItem.advertDetail;
        obj.name=editAdvItem.advertDetail.split('-')[1];
        this.fileList1[0]=obj;
      }
      if(editAdvItem.advertDetailType==0&&!editAdvItem.advertDetail){
        this.num=0
        this.fileList1=[]
      }
      if(editAdvItem.advertDetailType==2){
        this.num=2
        this.$http.get(`${this.$store.state.path}stores/${editAdvItem.advertDetail}`)//查询小区商户
          .then(res => {
            console.log(res.body)
            if (res.body.result) {
              this.storeN =res.body.result.storeName
            }
            if (!res.body.result) {

            }
          }, res => {

          })
      }
      if(editAdvItem.advertDetailType==1){
        this.num=3
        this.$http.get(`${this.$store.state.path}goods/v2/${editAdvItem.advertDetail}`)//查询商品
          .then(res => {
            console.log(res.body)
            if (res.body.result) {
              this.goodsN =res.body.result.name
              this.storeTz = res.body.result.storeId
              this.goodsTz = res.body.result.goodsId
              this.goodsDUrl = res.body.result.goodsDetail
              console.log(this.goodsDUrl)
              let obj={};
              obj.url=res.body.result.goodsDetail;
              obj.name=res.body.result.goodsDetail.split('-')[1];
              this.fileList2[0]=obj;
              console.log(this.fileList2)
              this.$http.get(`${this.$store.state.path}stores/${res.body.result.storeId}`)//查询小区商户
                .then(res => {
                  console.log(res.body)
                  if (res.body.result) {
                    this.storeN =res.body.result.storeName
                  }
                  if (!res.body.result) {

                  }
                }, res => {

                })
            }
            if (!res.body.result) {

            }
          }, res => {

          })
      }
    }
  }
</script>
<style scoped>
  .font_color1{
    color:#597380;
  }
  .font_color2{
    color:#fff;
  }
  .font_color3{
    color:#FF8761;
  }
  .font_size1{
    font-size:14px;
  }
  .font_size2{
    font-size:16px;
  }
  .font_size3{
    font-size:18px;
  }
  .bgcolor1{
    background-color:#fff;
  }
  .bgcolor2{
    background-color:#57BDDE;
  }
  .bgcolor3{
    background-color:#ECEEF2;
  }
  .storePromotion{
    font-family:MicrosoftYaHei;
    padding-left:200px;
    background-color:#F5F5F5;
  }
  .storePromotion .top{
    height:70px;
    line-height:70px;
  }
  .storePromotion .top span{
    display:inline-block;
    width:150px;
    height:100%;
    line-height:80px;
    text-align:center;
    border-right:1px solid #D7D9DD;

  }
  .storePromotion .content{
    margin:36px 23px 356px 22px;
    height:80%;
    padding:40px 0 0 143px;
    border-top-left-radius:5px;
    border-bottom-right-radius:5px;
    overflow: auto;
  }
  .storePromotion .content .adv-item{
    /*display:flex;*/
    /*flex-direction:row;*/
    /*flex-wrap:nowrap;*/
    margin-bottom:31px;
  }
  .storePromotion  .adv-input{
    width:300px!important;
    height:40px!important;
  }
  .storePromotion .adv-item .time-line{
    display:inline-block;
    color:#DADADA;
    margin:0 7px;
  }
  .storePromotion  .pushBtn{
    display:inline-block;
    width:120px;
    height:40px!important;
    background-color:#57BDDE;
    border-radius:5px;
    color: #fff;
    text-align:center;
    line-height:40px;
    position:relative;
    border:none;
  }
  .storePromotion  .pushBtn:hover{
    background-color:#1dabd9;
    border-color:#1dabd9;
    color:#fff;
  }
  .storePromotion  .pushBtn  .el-icon-upload{
    margin-right:8px;
  }
  .storePromotion  .pushBtn span{
    /*border:1px solid red;*/
    display:inline-block;
    width:120px;
    height:40px!important;
    border-radius:5px;
    line-height:40px;
    position:absolute;
    top:0;
    left:0;
  }
  .storePromotion  .push_label{
    color:#C1CDD3;
    font-size:12px;
    height:13px;
    line-height:13px;
    display:inline-block;
    margin-top:16px;
  }
  .storePromotion .push_label:before{
    content:"*";
    color:#57BDDE;
    font-size:14px;
    display: inline-block;
    width:6px;
    height:6px;
    height:13px;
    line-height:13px;
    margin-right:3px;
  }
  .errShow{
    width:200px;
  }
  /*.del_adv{*/
    /*width:600px;*/
    /*height:227px;*/
    /*background-color:#fff;*/
    /*position:absolute;*/
    /*top:227px;*/
    /*left:430px;*/
    /*z-index:1000;*/
    /*border-radius:5px;*/
    /*display:flex;*/
    /*flex-direction:column;*/
    /*flex-wrap:nowrap;*/
    /*justify-content: center;*/
    /*align-items:center;*/
  /*}*/
  /*.del_adv .dev_label{*/
    /*color:#597380;*/
    /*font-size:18px;*/
  /*}*/
  /*.del_adv .del_btn{*/
    /*margin-top:61px;*/
  /*}*/
  /*.del_adv .del_btn .el-button{*/
    /*width:150px;*/
    /*height:50px;*/
    /*border:none;*/
    /*color:#fff;*/
    /*font-size:18px;*/
  /*}*/
  /*.del_adv .del_btn .cancle{*/
    /*background-color:#FF8761;*/
  /*}*/
  /*.del_adv .del_btn .comfirm{*/
    /*background-color:#57BDDE;*/
  /*}*/
  /*.del_adv .del_icon{*/
    /*position:absolute;*/
    /*color:#597380;*/
    /*font-size:20px;*/
    /*top:16px;*/
    /*right:26px;*/
  /*}*/
  .bc_btn:active{
    color:#fff!important;
  }



</style>
